<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="box"></select>
</body>
</html>
<script>
    //1.实例一个XMLhttpRequest对象
    let xhr = new XMLHttpRequest();
    //2.调用对象的open方法实现一个异步请求
    xhr.open("get","http://192.168.50.70/api.php?id=0");
    //3.调用xhr的send（）发送一个ajax请求
    xhr.send(null);
    //4.实现一个回调函数，接收返回值
    xhr.onreadystatechange = function(){
        //xhr.readyState属性一共有5个值，代表5种状态
        if(xhr.readyState == 4){
            //服务器返回的数据会填充到xhr.responseText中
            console.log(JSON.parse(xhr.responseText));
            let data = JSON.parse(xhr.responseText)
            let str = "";
            for(let item of data.data){
                str += `<option>${item.name}</option>`;
            }
            box.innerHTML = str;
        }
    }
/* 
    let xhr = new XMLHttpRequest();
    xhr.open("post","http://192.168.50.70/api.php?id=0",true);
    xhr.setRequestHeader("","")
    xhr.send("id=0");
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            let data = JSON.parse(xhr.responseText);
            let str = "";
            for(let item of data.data){
                str += `<option>${item.name}</option>`
            }
            box.innerHTML = str;
        }
    } */





</script>